<template>
  <div class="mappage">
    <div class="map-containera">
      <!-- 左侧年份导航栏，右侧大图显示 -->
      <div class="mapleft">
        <div class="comedetail">
          <div class="textcome" @click="showaa(1)">进口数据详情</div>
          <div class="comeli" :class="{ active: activeIndex === 1 }">
            <li
              v-for="(item, index) in datalist"
              :key="index"
              @click="getdatayear(item, 'come')"
            >
              {{ item }}
            </li>
          </div>
        </div>
        <div class="comedetail">
          <div class="textcome" @click="showaa(2)">出口数据详情</div>
          <div class="comeli" :class="{ active: activeIndex === 2 }">
            <li
              v-for="(item, index) in datalist"
              :key="index"
              @click="getdatayear(item, 'out')"
            >
              {{ item }}
            </li>
          </div>
        </div>
      </div>
      <div class="mapright">
        <div ref="mapContainer" class="map-container"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";
import china from "@/assets/china.json";
// import axios from "axios";
echarts.registerMap("china", china);
const myChart = ref(null);
const datalist = ref([2020, 2021, 2022, 2023, 2024]);
const activeIndex = ref(1); //默认展开第一个
const addressdata = ref([]);

// 获取本地数据
const localdata = localStorage.getItem("addresslist");
const list = JSON.parse(localdata);

const showaa = (index) => {
  activeIndex.value = activeIndex.value === index ? null : index;
};
// 点击年份获取数据
const getdatayear = async (year, itemdata) => {
  addressdata.value = [];
  // alert(year);
  if (itemdata == "come") {
    // 进口数据
    // alert(year);
    const res = await axios.get(
      `http://127.0.0.1:5000/api/data/mapjingkoudata`
    );
    console.log(res.data);
    // 根据year筛选数据
    const comelist = res.data.filter((item) => item.year == year);
    addressdata.value = comelist[0].data;
    // 存在本地
    localStorage.setItem("addresslist", JSON.stringify(addressdata.value));
    //重新加载页面
    window.location.reload();
  } else {
    // 出口数据
    const outres = await axios.get(
      `http://127.0.0.1:5000/api/data/mapchukoudata`
    );
    // 根据year筛选数据
    const outlist = outres.data.filter((item) => item.year == year);
    addressdata.value = outlist[0].data;
    // 存在本地
    localStorage.setItem("addresslist", JSON.stringify(addressdata.value));
    //重新加载页面
    window.location.reload();
  }
};
onMounted(() => {
  const mapContainer = document.querySelector(".map-container");
  myChart.value = echarts.init(mapContainer);
  var img2 =
    "image://";
  var mapName = "china";
  var data = [];

  var toolTipData = [...list];
  var geoCoordMap = {
    // 直辖市
    北京市: [116.4551, 40.2539],
    天津市: [117.4219, 39.4189],
    上海市: [121.4648, 31.2891],
    重庆市: [107.7539, 30.1904],

    // 省
    黑龙江省: [127.9688, 45.368],
    吉林省: [125.8154, 44.2584],
    辽宁省: [123.1238, 42.1216],
    河北省: [114.4995, 38.1006],
    山西省: [112.3352, 37.9413],
    陕西省: [109.1162, 34.2004],
    甘肃省: [103.5901, 36.3043],
    青海省: [96.2025, 35.4998],
    山东省: [118.7402, 36.4307],
    河南省: [113.4668, 34.1234],
    江苏省: [119.1433, 33.5547],
    浙江省: [120.498, 29.0918],
    安徽省: [117.2757, 31.8633],
    福建省: [119.4543, 25.9222],
    江西省: [115.9102, 27.9553],
    湖北省: [112.2363, 30.7373],
    湖南省: [112.9838, 28.1126],
    四川省: [103.9526, 30.7617],
    贵州省: [106.6992, 26.7682],
    云南省: [102.9199, 24.2695],
    广东省: [113.5107, 23.2196],
    海南省: [109.9512, 19.2041],

    // 自治区
    内蒙古自治区: [111.4124, 40.4901],
    广西壮族自治区: [108.479, 23.1152],
    西藏自治区: [91.1865, 30.1465],
    宁夏回族自治区: [106.3586, 38.1775],
    新疆维吾尔自治区: [87.9236, 43.5883],

    // 特别行政区
    香港特别行政区: [114.173, 22.32],
    澳门特别行政区: [113.549, 22.199],

    // 台湾地区
    台湾省: [121.52, 25.0307],
  };

  /*获取地图数据*/
  myChart.value.showLoading();
  var mapFeatures = echarts.getMap(mapName).geoJson.features;
  myChart.value.hideLoading();
  mapFeatures.forEach(function (v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
  });

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
    }
    return res;
  };

  // 柱状体的主干
  function lineData() {
    return toolTipData
      .filter((item) => geoCoordMap[item.name]) // 添加过滤条件
      .map((item) => {
        return {
          coords: [
            geoCoordMap[item.name],
            [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5],
          ],
        };
      });
  }

  // 柱状体的顶部
  function scatterData() {
    return toolTipData
      .filter((item) => geoCoordMap[item.name]) // 添加过滤条件
      .map((item) => {
        return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, item];
      });
  }

  // 定义公共的 itemStyle 对象
  const commonItemStyle = {
    normal: {
      borderWidth: 1,
      borderColor: "rgba(58,149,253,0.8)",
      shadowColor: "#8cd3ef",
      shadowOffsetY: 5,
      shadowBlur: 15,
      areaColor: "rgba(5,21,35,0.1)",
    },
  };

  var option = {
    backgroundColor: "#003366",
    title: {
      show: true,
      text: "进出口大屏展示",
      x: "center",
      top: "10",
      textStyle: {
        color: "#fff",
        fontFamily: "等线",
        fontSize: 18,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        let toolTiphtml = "";
        if (
          params.seriesType === "scatter" ||
          params.seriesType === "effectScatter"
        ) {
          const targetData = toolTipData.find(
            (item) => item.name === params.name
          );
          if (targetData) {
            toolTiphtml += `${targetData.name}：${targetData.value}`;
          }
        } else if (params.seriesType === "map") {
          const targetData = toolTipData.find(
            (item) => item.name === params.name
          );
          if (targetData) {
            toolTiphtml += `${targetData.name}：${targetData.value}`;
          }
        }
        return toolTiphtml;
      },
      backgroundColor: "#fff",
      borderColor: "#333",
      padding: [5, 10],
      textStyle: {
        color: "#333",
        fontSize: "16",
      },
    },
    geo: [
      {
        layoutCenter: ["50%", "50%"], //位置
        layoutSize: "180%", //大小
        show: true,
        map: mapName,
        roam: false,
        zoom: 0.65,
        aspectScale: 1,
        label: {
          normal: {
            show: false,
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#c0f3fb",
            borderWidth: 1,
            shadowColor: "#8cd3ef",
            shadowOffsetY: 10,
            shadowBlur: 120,
          },
          emphasis: {
            areaColor: "rgba(0,254,233,0.6)",
          },
        },
      },
      {
        type: "map",
        map: mapName,
        zlevel: -1,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "51%"],
        layoutSize: "180%",
        roam: false,
        silent: true,
        itemStyle: commonItemStyle,
      },
      {
        type: "map",
        map: mapName,
        zlevel: -2,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "52%"],
        layoutSize: "180%",
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            ...commonItemStyle.normal,
            borderColor: "rgba(58,149,253,0.6)",
            shadowColor: "rgba(65, 214, 255,1)",
            areaColor: "transpercent",
          },
        },
      },
      {
        type: "map",
        map: mapName,
        zlevel: -3,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "53%"],
        layoutSize: "180%",
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            ...commonItemStyle.normal,
            borderColor: "rgba(58,149,253,0.4)",
            shadowColor: "rgba(58,149,253,1)",
            areaColor: "transpercent",
          },
        },
      },
      {
        type: "map",
        map: mapName,
        zlevel: -4,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "54%"],
        layoutSize: "180%",
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            ...commonItemStyle.normal,
            borderWidth: 5,
            borderColor: "rgba(5,9,57,0.8)",
            shadowColor: "rgba(29, 111, 165,0.8)",
            areaColor: "rgba(5,21,35,0.1)",
          },
        },
      },
    ],
    series: [
      {
        type: "map",
        map: mapName,
        geoIndex: 0,
        aspectScale: 1, //长宽比
        zoom: 0.65,
        showLegendSymbol: true,
        roam: true,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: "120%",
            },
          },
          emphasis: {
            // show: false,
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#fff",
            borderWidth: 0.2,
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "180%",
        animation: false,
        markPoint: {
          symbol: "none",
        },
        data: data,
      },
      //柱状体的主干
      {
        type: "lines",
        zlevel: 5,
        effect: {
          show: false,
          symbolSize: 5, // 图标大小
        },
        lineStyle: {
          width: 6, // 尾迹线条宽度
          color: "rgba(249, 105, 13, .6)",
          opacity: 1, // 尾迹线条透明度
          curveness: 0, // 尾迹线条曲直度
        },
        label: {
          show: 0,
          position: "end",
          formatter: "245",
        },
        silent: true,
        data: lineData(),
      },
      // 柱状体的顶部
      {
        type: "scatter",
        coordinateSystem: "geo",
        geoIndex: 0,
        zlevel: 5,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              var name = params.data[2].name;
              var value = params.data[2].value;
              var text = `{tline|${name}} : {fline|${value}}`;
              return text;
            },
            color: "#fff",
            rich: {
              fline: {
                color: "#fff",
                fontSize: 14,
                fontWeight: 600,
              },
              tline: {
                color: "#ABF8FF",
                fontSize: 12,
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: "#00FFF6",
          opacity: 1,
        },
        symbol: img2,
        symbolSize: [110, 60],
        symbolOffset: [0, -20],
        z: 999,
        data: scatterData(),
      },
      {
        name: "Top 5",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: convertData(toolTipData),
        showEffectOn: "render",
        itemStyle: {
          normal: {
            color: "#00FFFF",
          },
        },
        rippleEffect: {
          scale: 5,
          brushType: "stroke",
        },
        label: {
          normal: {
            formatter: "{b}",
            position: "bottom",
            show: false,
            color: "#fff",
            distance: 10,
          },
        },
        symbol: "circle",
        symbolSize: [20, 10],

        zlevel: 4,
      },
    ],
  };
  myChart.value.setOption(option);
});
</script>

<style scoped>
.mappage {
  width: 100%;
  height: 100%;
}
.map-containera {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.mapleft {
  flex: 1;
  height: 100%;
  padding-right: 20px;
  cursor: pointer;
}
.textcome {
  width: 100%;
  padding: 10px 0;
  background-color: red;
  text-align: center;
  margin-bottom: 5px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.comeli {
  display: none;
}
.comeli li {
  list-style: none;
  text-align: center;
  padding: 10px 0;
  color: #fff;
  cursor: pointer;
}
.active {
  display: block;
}
.mapright {
  flex: 9;
  height: 100%;
}
.map-container {
  width: 100%;
  height: 100%;
}
</style>
